Nested Boxes

body

THE HEADER

Main

The Content

SAMPLE CODE

<Style>
  
	body {
	width:100%;
	font-family: geergia, "times New roman", Times. serif;
	font-size: 1em;
	background-color: white;
	color: black
	
	}
	
	div#main {
	 width: 90%;
	 /*  since this section is 90% of the browser window and boxes are left justified this will split the difference vbetween the 10% that is left over*/
	 margin: 0 auto 0 auto;
	 /* margin: 0 auto 0 auto;  adds white space above and/or below the section by replacing the zeroes with em values */
	}
	
	div#theheader {
	 width: 100%;
	 background-color: yellow;
	/* position: absolute; */
	 position: fixed; /* prevents the header from scrolling  */
	 top: 0;
	 left: 0;
	}
	
	div#theheader img {
	 float: left;
	 margin: .9em .6em 0 .75em;
	}
	
	div#theheader h2 {
	 font-family: Verdana, Geneva, sans-serif;
	 font-weight: 900;
	 font-size: 2em;
	 margin-left: 2%;
	 padding: 0;
	 color: black;
	}
	
	div#thecontent{
	 width: 68%;
	 float: left; /* without float the content and sidebar will not display next to each other*/
	}
	
	div#sidebar{
	 width: 29%;
	 float: right; /* without float the content and sidebar will not display next to each other*/
	}
	
	/* clears the floats to avoid unintended wraps*/
	.no_wrap {
	 clear: both;
	}

</style>

--------------------------------------------------------------------------------

<div id="theheader">
  <IMG WIDTH="90" HEIGHT="90" SRC="../../images/Header/PascaliRose.jpeg" ALT="PascaliRose">
  <h2>THE HEADER</h2>
 </div>
 <br><br>
 <div id="main">
 <h3>Main</h3>
 
   <div id="thecontent" class="no-wrap">
    <h3>The Content</h3>
    
	  <IMG SRC="../../images/Header/PascaliRose.jpeg" ALT="PascaliRose"><br>
		<IMG SRC="../../images/Header/PascaliRose.jpeg" ALT="PascaliRose"><br>
		<IMG SRC="../../images/Header/PascaliRose.jpeg" ALT="PascaliRose"><br>
		<IMG SRC="../../images/Header/PascaliRose.jpeg" ALT="PascaliRose"><br>
		<IMG SRC="../../images/Header/PascaliRose.jpeg" ALT="PascaliRose"><br>
		<IMG SRC="../../images/Header/PascaliRose.jpeg" ALT="PascaliRose"><br>
		<IMG SRC="../../images/Header/PascaliRose.jpeg" ALT="PascaliRose"><br>
		<IMG SRC="../../images/Header/PascaliRose.jpeg" ALT="PascaliRose"><br>
		<IMG SRC="../../images/Header/PascaliRose.jpeg" ALT="PascaliRose"><br>
		<IMG SRC="../../images/Header/PascaliRose.jpeg" ALT="PascaliRose"><br>
   </div> 
   <div id="sidebar" class="no-wrap">
    <h3>The Sidebar</h3>
    <p>the Pascali rose is an award winning rose.</p>
   </div> 
 
 
 
 
</div>